<template>
  <div>
    <div class="point" @click="getMsg()">
      <i class="el-icon-bell"></i>
      <span v-if="unreadCount > 0" class="unread-count">{{ unreadCount }}</span>
    </div>
    <el-dialog :visible.sync="isMessagePopupVisible" title="消息通知" width="30%" style="float:right;">
      <div class="message-container">
        <el-table :data="messages.list" style="width: 100%" border stripe
          :header-cell-style="{ background: '#fafafa' }">
          <el-table-column align="center" label="序号" width="60px">
            <template slot-scope="scope">
              {{ scope.$index + 1 + (messages.pageNum - 1) * messages.pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" align="center" width="200px">
            <template slot-scope="scope">
              <MsgView :data="scope.row" @click-updList="page(1, pageSize)" @click-updCount="getUReadCount()" />
            </template>
          </el-table-column>
          <el-table-column prop="createStr" label="通知时间" align="center" width="200px"></el-table-column>
        </el-table>
        <el-pagination background layout="total,prev, pager, next, jumper" :total="messages.total"
          :page-size="messages.pageSize" :current-page="messages.currentPage"
          @current-change="handleCurrentChange"></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePopup">取 消</el-button>
        <el-button type="primary" @click="closePopup">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listMsg, getUReadCount } from "@/api/basedata/msg";
import { getInfo } from "@/api/login";
import MsgView from "./MsgView.vue"
export default {
  name: "HeaderComponent",
  components: { MsgView },
  data() {
    return {
      unreadCount: 1, // 初始未读消息数量
      isMessagePopupVisible: false, // 消息框是否显示
      currentPage: 1,
      pageSize: 3,
      messages: {},
      userId: '',
      queryParams: {
       userId:null,
       pageNo:null,
       pagesize:null,
      },
    };
  },
  methods: {
    toIndex() {
      this.$router.forward("/");
    },
    page(currentPage,pageSize) {
      this.queryParams.userId = this.userId;
      this.queryParams.pageNo = currentPage;
      this.queryParams.pageSize = pageSize;
      listMsg(this.queryParams).then((res) => {
        this.messages = res.data;
      });
    },
    getMsg() {
      this.isMessagePopupVisible = true;
      this.page(1,3);
    },
    closePopup() {
      this.isMessagePopupVisible = false;
    },
    handleCurrentChange(currentPage) {
      this.messages.currentPage = currentPage;
      this.page(currentPage, this.messages.pageSize);
    },
    getUReadCount() {
      getUReadCount(this.userId).then((res) => {
        this.unreadCount = res.data;
      });
    },
    startTimer() {
      setInterval(() => {
        this.getUReadCount();
      }, 10000);
    }
  },
  mounted() {
    getInfo().then((res) => {
      this.userId = res.user.userId;
      this.getUReadCount();
    });

    //消息实时更新
    // this.startTimer();
  }
};
</script>

<style>
#logo {
  width: 60px;
  height: 60px;
}

.header {
  display: flex;
  background-color: #0090ff;
  color: #fffffc;
  line-height: 60px;
  justify-content: space-between;
}

.header-left {
  display: flex;
  font-weight: 700;
  font-size: 20px;
}

.header-right {
  display: flex;
  margin-right: 30px;
}

.header-right>div {
  margin: 0 5px;
}

.point {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.header-right>.welcome {
  width: 150px;
}

.point:hover {
  background-color: #48b2ff;
}

.unread-count {
  position: absolute;
  top: 10px;
  right: 25px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
}

.message-container {
  float: right;
  width: 100%;
}

.message-item {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.message-item.unread {
  background-color: #f0f9eb;
}

.message-item:hover {
  background-color: #f5f7fa;
}

.el-timeline-item {
  margin-bottom: 10px;
}
</style>
